<!--
 * @Author: your name
 * @Date: 2021-11-20 00:11:16
 * @LastEditTime: 2021-11-20 00:14:01
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\swyzt\swjc\sk\index.vue
-->
<template>
  <div>
    <!-- 图层树 -->
    <div class="checkboxTitle">
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item name="1">
          <template slot="title">
            <div class="treeTitle">
              <img src="../../../../assets/images/init/编组 17.png" alt="" />
              水资源
            </div>
          </template>
          <div class="tree">
            <el-tree
              :data="treeData"
              show-checkbox
              current-node-key
              node-key="id"
              :default-expanded-keys="[1]"
              :default-checked-keys="[]"
              @node-click="handleNodeClick"
              @check-change="handleCheckChange"
              :render-after-expand="false"
              :props="defaultProps"
            >
            </el-tree>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 水库 -->
    <div class="reservoir">
      <Left />
      <Right />
    </div>
  </div>
</template>

<script>
// import Left from './left/index'
import Right from './right/index'
export default {
  data() {
    return {
      activeNames: ["1"],
      treeData: [
        {
          id: 1,
          label: "图层",
          children: [
            {
              id: "13F3EBCC471B50592F70B682CE513849",
              label: "泵站",
            },
            {
              id: "F49B38144EE9CD55B30C3CA31997F666",
              label: "测站",
            },
            {
              id: "569DC9C24B0B3F02D34D5996DBF6DDD1",
              label: "电站",
            },
            {
              id: 5,
              label: "取水口",
            },
            {
              id: 4,
              label: "涉河建筑物",
            },
            {
              id: 5,
              label: "镇界面",
            },
            {
              id: 6,
              label: "村界面",
            },
            {
              id: 7,
              label: "河流面",
            },
            {
              id: 8,
              label: "水库面",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 折叠框
    handleChange(val) {
      console.log(val);
    },
    handleNodeClick(data) {
      console.log(data);
    },

    //树节点check发生改变事件
    async handleCheckChange(data, check, children) {
      console.log(data, check, children);
      if (check == true) {
        __g.infoTree.show([data.id]);
      }
      if( check == false){
         __g.infoTree.hide([data.id]);
      }
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: { Right},
};
</script>

<style lang="scss" scoped>
.checkboxTitle {
  width: 208px;
  // height: 230px;
  position: absolute;
  bottom: 20px;
  left: 32px;
  // overflow: auto;
  display: flex;
  flex-direction: column;
  /deep/ .el-collapse {
    border: none;
  }
  /deep/.el-collapse-item__header {
    color: #89cbff;
    height: 40px;
    img {
      width: 11px;
      margin: 0 10px 0 23px;
    }
    background: linear-gradient(
        180deg,
        rgba(0, 50, 105, 0.432802) 0%,
        rgba(4, 17, 32, 0.5) 100%
      ),
      rgba(0, 5, 10, 0.334353);
    backdrop-filter: blur(16.3097px);
  }
  /deep/ .el-collapse-item__wrap {
    background: rgba(0, 0, 0, 0);
    border: none;
  }
  /deep/ .el-collapse-item__header {
    border: none;
    border-bottom: 1px solid #ffffff80;
  }
  /deep/ .el-icon-arrow-right::before {
    content: "▶";
    color: #fff;
  }
  .treeTitle {
    width: 210px;
    height: 30px;
    color: #89cbff;
    // background: linear-gradient(
    //     180deg,
    //     rgba(0, 50, 105, 0.432802) 0%,
    //     rgba(4, 17, 32, 0.5) 100%
    //   ),
    //   rgba(0, 5, 10, 0.334353);
    display: flex;
    // justify-content: center;
    align-items: center;
    img {
      width: 11px;
      height: 14.5px;
      margin: 0 20px 0 15px;
    }
  }
  .tree {
    height: 240px;
    overflow: auto;
  }
}
.reservoir {
  width: 500px;
  height: calc(100% - 95px);
  position: absolute;
  right: 0;
  top: 95px;
  background: rgb(49, 180, 174);
//   border: 1px solid #fff;
  background: linear-gradient(
    -90deg,
    rgba(37, 52, 80, 0.8) 0%,
    rgba(5, 49, 126, 0) 100%
  );
}

.el-tabs--border-card {
  background-color: transparent;
}
.el-card {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 0px;
}

.el-tree-node__label {
  font-size: 14px;
  color: #fff;
}
.el-tree-node__content:hover {
  background-color: red;
}
.el-tree-node {
  .is-current {
    background-color: red;
  }
  .is-focusable {
    background-color: red;
  }
}

.el-table,
.el-tree,
.el-table__expanded-cell {
  background-color: transparent;
  color: #fff;
  border-radius: none;
}
</style>
<style lang="scss">
.el-checkbox__inner {
  display: inline-block;
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.774);
  border-radius: 0px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: transparent;
  // z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
.el-checkbox__inner {
  border: 1px solid rgba(255, 255, 255, 0.774);
  border-radius: 0%;
  background: rgba(0, 0, 0, 0.103) !important;
  margin-right: 5px !important;
}

.el-tree-node:focus > .el-tree-node__content {
  background-color: #66b1ff87 !important;
  border-radius: 5px;
}
.el-tree-node__content:hover {
  background-color: #66b1ff87;
  border-radius: 5px;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #66b1ff87;
}
</style>
